<template>
  <div class="body0">
    <el-card style="margin: 0 auto;padding: 0">
      <div class="searchbar">
        <img class="biglogo" src="../../assets/imgs/logo-01-b-01.png">
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-cart-2" @click="tocart">我的购物车</el-button>
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-bag-2" @click="toorder">我的订单</el-button>
        <div class="search" style="width: 450px;">
          <el-input placeholder="请输入商品名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </el-card>
    <el-card style="width: 1190px;margin: 0 auto;margin-top: 20px;text-align: left"shadow="never">
      搜索结果如下：
    </el-card>
    <div class="detail" style="width: 1190px;margin: 0 auto;">
      <el-row style="margin-top: 20px;" v-for="item in 2" gutter="20">
        <el-col v-for="item in 6" style="margin-bottom: 20px;" span="4">
          <a href="">
            <el-card style="height: 270px;">
              <img class="detail-img" src="../../assets/stx-mall/detail/img.png">
              <p class="detail-brief">跑步机家用降噪可折叠免安装宽大跑台</p>
              <span class="detail-price" >￥1549</span>
              <span class="detail-old-price">原价：9999</span>
              <span class="detail-sale-count">销量：999</span>
            </el-card>
          </a>
        </el-col>
      </el-row>
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
    }
  },

  methods: {
    tocart(){
      this.$router.go(0)
    },
    toorder(){
      this.$router.push('order')
    },

  }
}
</script>
<style>
.detail-sale-count{
  float: right;font-size: 15px;
}
.detail-old-price{
  float: right;text-decoration: line-through;font-size: 5px;color: rgba(0,0,0,0.5);margin-top: 10px;
}
.detail-price{
  float: left; font-size: 20px;font-weight: bold;color: rgb(255,37,27);margin-top: 25px;
}
.detail-brief{
  font-size: 4px;text-align: left;text-decoration-line: none;
}
.detail-img{
  width: 160px;
}
.detail .el-card__body{
  padding: 10px;text-align: left;
}
.searchbar{
  width: 900px;margin: 0 auto;height: 70px;
}
.search{
  float: right;margin-top: 15px;
}
.biglogo{
  width: 100px;float: left;
}

.el-main{
  margin: 0;padding: 0;
}


</style>